/*  CodeMirror */


.CodeMirror {
	font-family: $monospace;
	background: none;
	position: absolute; // need this, and a wrapper with `position:relative` to work in a flexbox
	box-sizing: border-box;

	div.CodeMirror-cursor {
		pointer-events: none; /* this doesn't work in IE<11 */
		border-left: 1px solid $doc-black;
	}
}

.CodeMirror-selected {
	background: rgba(170, 170, 170, 0.55);
}

.CodeMirror-focused .CodeMirror-selected {
	background: rgba(140, 150, 255, 0.8);
}

// this works, but of course the character isn't selectable, or highlightable:
.editor.multiline {
	.CodeMirror-line:not(:last-child)>span:after {
		pointer-events: none;
		color: $invischar-color;
		content: "\AC"; // ¬ alternately: \B6 ¶
	}
}

.CodeMirror-line {
	.cm-space::before, .cm-special::before {
		color: $invischar-color;
		content: "•"; // alternately: \B7 ·
		position: absolute;
	}
	
	.cm-special::before {
		color: $error-color;
	}
	
	.cm-tab {
		background: url();
		background-position: 100%;
		background-repeat: no-repeat;
		/*
		// ::before implementation. Doesn't stretch.
		pointer-events: none;
		content: "⟶";
		position: absolute;
		color: $invischar-color;
		*/
	}
}